<template>

  <div id="id" style="background-color: #fff;height: 1000px;">
    
        <top></top>
        <Navigation></Navigation>
        <div class="main_box_cla" style="width:100%;margin-top: 50px;height:500px;">
          <div class="main_box_cla_t" style="width:60%;margin: auto;background:#fff;">
              
              <div class="main_box_cla_t_box" style="margin:auto;background:#fff;">
               
                  <div class="main_box_cla_t_left" style="float: left;">
                      <div class="left_img" style="width:310px;">
                          <img style="width:310px;height:350px;border-radius: 5px;" :src="tableData.imgurl[0]" alt="">
                      </div>

                      <div class="forimg"   v-for="item in tableData.imgurl">

                      <div class="left_min_box">
                          <div class="left_min_box_1" style="float: left;">
                              <img style="width: 70px;height:70px;border-radius: 5px;margin-right: 5px;" :src="item" alt="">
                          </div>

                        </div>
                      </div>

                      </div>
                  </div>
                  <div class="main_box_cla_t_right" style="float: left;width:45%;margin-left: 20px;">
                         <div class="main_box_cla_t_right_title" style="width:100%;">
                             <span style="font-size: 16px;font-weight:550;">
                              <el-tag type="danger">商城直营</el-tag>&nbsp;&nbsp;
                              {{tableData.desc}}</span>
                         </div>
                         <div class="main_box_cla_t_right_img" style="background: rgb(219, 217, 217);margin-top: 8px;border-radius: 5px;">
                          <div class="sp_price_img" style="width:100%;">
                              <img src="https://img10.360buyimg.com/umm/jfs/t1/216749/1/8400/13802/61c047cdE55ffd9ae/a43f5cd161951cf0.png" alt="">
                          </div>
                          <div class="sp_price_text" style="padding: 10px;">
                              <span style="font-size: 14px;">价&nbsp;&nbsp;&nbsp;&nbsp;：</span>
                              <span style="font-size: 20px;color: rgb(245, 77, 35);">{{tableData.price}}元</span><br><br>
                              <span style="font-size: 14px;">原&nbsp;&nbsp;&nbsp;&nbsp;价：</span>
                              <span style="font-size: 16px;color: rgb(119, 114, 113);text-decoration:line-through;">{{tableData.price}}元</span><br><br>
                              <span style="font-size: 14px;">商品数量：</span>
                              <span style="font-size: 16px;color: rgb(75, 74, 74);">{{tableData.quantity}}件</span><br><br>
                          
                          </div>
      
                         </div>

                         <div class="sp_price_t" style="margin-top: 10px;margin-bottom: 5px;">
                          <el-tag type="success">{{tableData.region}}</el-tag>&nbsp;&nbsp;
                         
                          <el-tag type="success">{{tableData.type}}</el-tag>&nbsp;&nbsp;
                        </div>


                    
                        <div class="sp_price_y" style="margin-top: 10px;">
                          <el-input-number v-model="num" @change="handleChange(tableData.price)" :min="1" :max="1000" label="描述文字"></el-input-number>
                          <span style="margin-left: 20px;font-size: 15px;">总价:</span> <span  style="font-size: 18px;">{{price}}元</span>
                        </div>

                        <div class="sp_price_s" style="margin-top: 20px;">
                          <el-button type="primary" size="medium" plain style="width:150px;" @click="shoppingcard()">加入购物车</el-button>
                          <el-button type="success" size="medium" plain style="margin-left: 10px;width:150px;" @click="payshopping()">立即购买</el-button>
                        </div>


                  </div>


              </div>

            </div>
            <div class="user-box-" style="width:100%;height:100%;background-color: #fff;">


            <div class="user-box-pl"  style="width:60%;margin:auto;">

              <template>
                <el-tabs v-model="activeName" @tab-click="handleClick">
                  <el-tab-pane label="商品详情" name="first">

          
                    <span style="font-size: 20px;">{{tableData.desc}}</span>
                    <div class="forimg" v-for="item in tableData.imgurl" style="margin: auto;margin-top: 20px;">
                    <div class="left_min_box">
                    <div class="left_min_box_1" style="float: left;margin-left: 20px;">
                    <img style="width: 800px;height:600px;border-radius: 5px;margin-right: 5px;" :src="item" alt="">
                    </div>
                    </div>
                    </div>

                  </el-tab-pane>
                  <el-tab-pane label="用户评论" name="second">


                    <div v-if="flag">
                      <el-empty description="当前商品还没有评论哦,赶快购买来评论抢沙发吧!"></el-empty>
                    </div>
 
                  <div v-else>
                    <div class="user-box-pl-box" v-for="item in userDate" ><br>
                      <span> <el-avatar :src="item.userimg"></el-avatar></span>
                      <div class="span-box" style="margin-top: -40px;margin-left: 40px;">
                      <span style="margin-left: 20px;color: rgb(72, 99, 68);font-size: 14px;">{{item.username}}</span>
                      <span style="margin-left: 30%;color: rgb(105, 105, 105);font-size: 14px;">{{item.evaluatedtime}}</span><br><br>
                      <span style="color: rgb(53, 50, 50);margin-left: 20px;font-size: 14px;">{{item.textarea}}</span>
                    </div>
                  </div>
                </div>

                  </el-tab-pane>
                </el-tabs>
              </template>



   
      
   

            </div>
 
  
          </div>
        </div>

        


         <!-- <el-input
            type="textarea"
            :rows="2"
            style="padding: 10px;"
            placeholder="请输入内容"
            v-model="textarea">
          </el-input><br>
          <el-button type="success">确认发布</el-button> -->


        </div>
      
      </div>
          </div>


      </div>


  </div>




</template>

<script>



  export default {
      data() {
        return {
          num:1,
          price:0,
          tableData:[],
          ShopingData:[],
          userDate:[],
          activeName: 'first',
          flag:false,
        };
      },
      mounted:function(){
      this.loadexecution();
  },

  methods: {


    handleSelect(index){

      if(index==1){

      }else if(index==2)
      {

      }else if(index == 3){

        this.$router.push('/ShoppingCard')

      }else if(index==4){

      }else{

      }

    
    },


      handleChange(price)
      {
          this.price = (this.num*price).toFixed(2)
      },

      async  loadexecution(){

    
        
        const {data:re} = await this.$http.post('person/findevaluated',this.$qs.stringify({dityId:this.$route.query.dityId}));
        if(re.success==true){
          console.log(re)
          this.userDate = re.result
        }else{
          console.log(re)
          this.flag = true;
        }
       

        const {data:res} = await this.$http.post('person/getbyId',this.$qs.stringify({id:this.$route.query.id,email:JSON.parse(localStorage.getItem('email'))}));
        if(res.success==true){
          this.tableData = res.result;
          var img =  this.tableData.imgurl.replace("[",""); 
              img =  img.replace("]",""); 
              img =  img.replace(/\"/g, "");
          this.tableData.imgurl =img.split(",");
          this.price = this.tableData.price
          console.log(this.tableData)
        }

      },
      async shoppingcard()
      {

          
          this.ShopingData={
              num:this.num,
              price:this.price,
              dityId:this.tableData.dityId,
              useremail:JSON.parse(localStorage.getItem('email'))
          }

          
         let data =this.$qs.stringify({
          dat:JSON.stringify(this.ShopingData)
       });

        const {data:res} = await this.$http.post('person/addShoping',data);
        if(res.success==true){
          this.utils.success(res.message)
          this.$router.push({path: '/ShoppingCard'});
        }else{
          this.utils.error(res.message);
        }
      },


      async   payshopping(){        
      //单件商品创建订单
        this.table={
              ordrNum:this.num,
              orderMonry:this.price,
              dityId:this.tableData.dityId,
              orderuser:JSON.parse(localStorage.getItem('email')),
              userAddress:JSON.parse(localStorage.getItem('email')),
              spname:this.tableData.name,
          }
          let data =this.$qs.stringify({
          dat:JSON.stringify(this.table)
        })

        const {data:res} = await this.$http.post('person/userOrder',data);
        if(res.success==true){
          this.utils.success("订单创建成功!可立即支付")
          this.$router.push({path: '/userOrderPage'});
        }else{
          this.utils.error(res.message);
        }

         }  
  }
    }
    

  </script>


<style scoped>


</style>